<script setup>
	import {User, Lock,Postcard} from '@element-plus/icons-vue'
	import {ref} from 'vue'
	import {adminApi} from '@/api/admin/admin.js'
	import {ElMessage} from 'element-plus'
	const admin=ref({
		name:'',
		password:'',
		captcha:''
	})
	
	//表单正则表达式验证
	const rules=ref({
		name:[
			{required: true, message: '请输入用户名', trigger: 'blur'},
			{min: 5, max: 16, message: '用户名的长度必须为5~16位', trigger: 'blur'}
		],
		password:[
			{required: true, message: '请输入密码', trigger: 'blur'},
			{min: 3, max: 16, message: '密码长度必须为3~16位', trigger: 'blur'}
		]
	})
	
	import {useRouter} from 'vue-router'
	const router = useRouter()
	import {useTokenStore} from "@/store/token.js";
	import captchaApi from "@/api/admin/captcha.js";
	const tokenStore=useTokenStore()
	
	const captcha = ref('')
	const loadCaptcha = () => {
		captchaApi.captcha().then(result => {
			captcha.value = result.data
		})
	}
	
	loadCaptcha()
	
	const login=()=>{
		adminApi.login(admin.value).then(result=>{
			if (result.code === 0) {
				ElMessage.success(result.msg)
				//将得到的token存到pinia中
				tokenStore.setToken(result.data,remember.value)
				router.push('/')
			} else {
				ElMessage.error(result.msg)
				loadCaptcha()
			}
		})
	}
	
	//记录是不是勾选记住密码
	const remember=ref(false)
</script>

<template>
	<div class="login-bg">
		<!-- 登录表单 -->
		<el-form class="form-login" ref="form" size="large" autocomplete="off" :model="admin" :rules="rules">
			<el-form-item>
				<h1>登录</h1>
			</el-form-item>
			<el-form-item prop="name">
				<el-input :prefix-icon="User" placeholder="请输入用户名" v-model="admin.name"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
						  v-model="admin.password"></el-input>
			</el-form-item>
			<el-form-item prop="captcha">
				<el-input name="captcha" :prefix-icon="Postcard" type="text" placeholder="请输入验证码"
						  v-model="admin.captcha" clearable></el-input>
<!--				<img width="160px" src="http://localhost:5173/api/captcha" alt="验证码"/>-->
				<img width="160px" :src="captcha" @click="loadCaptcha" alt="验证码"/>
			</el-form-item>
			<el-form-item class="flex">
				<div class="flex">
					<el-checkbox v-model="remember">记住我</el-checkbox>
					<el-link type="primary" :underline="false">忘记密码？</el-link>
				</div>
			</el-form-item>
			<!-- 登录按钮 -->
			<el-form-item>
				<el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<style scoped>
	.login-bg {
		height: 100%;
		background-image: url('@/assets/logo.png');
		background-repeat: no-repeat;
		background-position: center;
		background-attachment: fixed;
		background-size: cover;
	}
	
	.form-login {
		width: 350px;
		padding: 20px;
		position: absolute;
		top: 20%;
		left: calc(50% - 150px);
		background-color: #FFF;
		box-shadow: 10px 10px 30px #000;
	}
</style>